<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="../../common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>阿金美业</title>
  <link rel="stylesheet" type="text/css" href="${ctx }/resource/css/reset.css">
  <link rel="stylesheet" type="text/css" href="${ctx }/resource/css/style.css">
    <link rel="stylesheet" type="text/css" href="${ctx }/resource/css/select.css">
  <script type="text/javascript" src="${ctx }/resource/js/lib/rem.js"></script>
</head>
<body class="bg-color">
  <div class="wrap_inner">
  <div class="posi-inner">
    <div class="flex intr-hairsty">
      <div class="bg" style="background-image: url(${ctx }/resource/img/topPic/${work.pic.path })"></div>
      <div class="intr-word">
        <p class="tit">${work.name}</p>
        <p class="into">今日预约：10</p>
        <div class="reward">
          ${work.remark }
        </div>
      </div>
    </div>
    <div class="appo-time">
      <div class="flex">
        <label class="tit">预约项目:</label>
        <div class="sele-wrap" id="showOption">
          	请选择项目
        </div>
      </div>
    </div>
    </div>
  </div>
  <div class="posi-inner time-ps-inner">
    <div class="appo-time clearfix flex">
      <div class="pull-left">
        <p class="time-not">请选择预约日期</p>
        <div class="time-get">
          <div class="flex">
            <img src="${ctx }/resource/img/icon/data-get.png" /><span>预约日期</span>
          </div>
          <p id="day" class="time-show">0000-00-00</p>
        </div>
        <input class="get-put" id="gettime1" type="text" readonly="readonly" name="input_date"/>
      </div>
      <span class="line-cen"></span>
      <div class="pull-right">
        <p class="time-not">请选择预约时间</p>
        <div class="time-get">
          <div class="flex">
            <img src="${ctx }/resource/img/icon/time-get.png" /><span>预约日期</span>
          </div>
          <p id="time" class="time-show">00:00</p>
        </div>
        <input class="get-put" id="gettime2" type="text" readonly="readonly"  name="input_date"/>
      </div>
    </div>
  </div>
  <a href="javaScript:;" onclick="bespeak();" class="pay-btn app-btn">立即预约</a>
  </div>
   <%@ include file="../../common/foot.jsp"%>
  <script type="text/javascript" src="${ctx }/resource/js/lib/jquery-3.3.1.js"></script>
  <script type="text/javascript" src="${ctx }/resource/js/lib/select.js"></script>
  <script type="text/javascript" src="${ctx }/resource/js/lib/timeget.js"></script>
  <script type="text/javascript">
    var calendar = new lCalendar();
    calendar.init({
      'trigger': '#gettime1',
      'type': 'date'
    });
    var calendartime = new lCalendar();
    calendartime.init({
      'trigger': '#gettime2',
      'type': 'time'
    });
    
    var dataService = [/* 
        {'id': '10001', 'value': '剪发'},
        {'id': '10002', 'value': '理发'},
        {'id': '10003', 'value': '护法'}, */];
    $.post("getserviceListAjax",function(data){
    	dataService=data;
    });
        var showBankDom = document.querySelector('#showOption');
        showBankDom.addEventListener('click', function () {
            var bankId = showBankDom.dataset['id'];
            var bankName = showBankDom.dataset['value'];
            var bankSelect = new IosSelect(1, 
                [dataService],{
                    container: '.container',
                    title: '服务项选择',
                    itemHeight: 50,
                    itemShowCount: 3,
                    oneLevelId: bankId,
                    callback: function (selectOneObj) {
                        showBankDom.value = selectOneObj.id;
                        showBankDom.innerHTML = selectOneObj.value;
                        showBankDom.dataset['id'] = selectOneObj.id;
                        showBankDom.dataset['value'] = selectOneObj.value;
                    }
            });
        });
    
    
    function bespeak(){
    	var id = ${work.id};
    	var vipid=${vip.id};
    	var day = $("#day").html();
    	var time =$("#time").html();
    	var selectservice = $("#showOption").attr("data-id");
    	if(selectservice==null){
    		alert("选择服务项鸭！");
    		return;
    	}
    	if(day=='0000-00-00'){
    		alert("请选择预约日期");
    		return ;
    	}
    	if(time=='00:00'){
    		alert("请选择预约时间");
    		return ;
    	}
    	$.post("save", {id:id,vipid:vipid,day:day,time:time,selectservice:selectservice },
    	function(data){
    		var code=data.code;
    		switch (code) {
			case 1:
				alert("恭喜你！预约成功了。");
				window.location.href = "oauthList";
				break;
			case -1:
				alert("你确定你预约的时间是合适的吗？");
				break;
			case -2:
				alert("今天你已经预约过了！请不要重复预约!");
				break;
			}
   	 	});
    	
    }
    
  </script>
</body>
</html>